$(function(){
    // banner 轮播图部分js原生语法
    let index = 0;
    let index_prev = 0;
    function next(){
        let $slides = $(".slide");
        if(index === $slides.length - 1){
            index = 0;
            index_prev = $slides.length - 1;
        }else{
            index += 1;
            index_prev = index - 1;
        }
        // 利用循环结构添加与删除类名
        for(let i = 0; i < $slides.length; i++){
            $slides.removeClass("active");
            $slides.removeClass("prev");
        }
        $slides[index].classList.add("active");
        $slides[index_prev].classList.add("prev"); 
        handlerPagination();
        changeImage(index);
    }


    function prev(){
        let $slides = $(".slide");
        if(index === 0){
            index = $slides.length - 1;
            index_prev = 0;
        }else{
            index -= 1;
            index_prev = index + 1;
        }
        for(let i = 0; i < $slides.length; i++){
            $slides.removeClass("active");
            $slides.removeClass("prev");
        }
        $slides[index].classList.add("active");
        $slides[index_prev].classList.add("prev");    
    }
    // 轮播图原生js淡入淡出动画功能


    // 添加分页器功能
    function setSpan(){
        let $slides = $(".slide")
        for(let i = 0; i < $slides.length; i++){
            // 为什么只创建了一份？前面创建的内容被覆盖了
            // $(".pagination").html(`<span class="active" data-index = ${i}></span>`)
            // 方法一：为上面html方法的正确添加
            // $(".pagination").append(`<span class="active" data-index = ${i}></span>`)
            // 方法二：利用创建元素的API实现元素的创建
            let $span = $("<span>");
            $span.attr("data-index",i);
            $(".pagination").append($span);
        }
        $("span[data-index = 0]").addClass("active");
    }
    // 分页器划入划出动画
    
    function handlerPagination(){
        let $spans = $("span[data-index]");
        for(let i = 0; i < $spans.length; i++){
            $spans.removeClass("active");
        }
        $spans[index].classList.add("active");
    }
    // 自动切换功能 jqdom.trigger("事件名")
    // let t = setInterval(function(){
    //     $(".button-next").trigger("click");
    // },1500);
    let t = setInterval(next,1500)
    // 鼠标划入轮播图，实现关闭自动播放功能
    function handlerMouseEnter(){
        clearInterval(t);
    }
    // 实现鼠标划出，启动自动播放功能
    function handlerMouseLeave(){
        clearInterval(t);
        t = setInterval(function(){
            $(".button-next").trigger("click");
        },1500);
    }
    // 改变banner背景图
    function changeImage(i){
        let $color_attry = ["#f3f3f3","#7281F6","#EF1313","#E0D8D6","#B32323","#AC93D7"];
        $(".container")[0].style.background = `${$color_attry[i]}`;
    }

    setSpan();
    $(".button-next").on("click",next);
    $(".button-prev").on("click",prev);
    $(".container").on("mouseenter",handlerMouseEnter);
    $(".container").on("mouseleave",handlerMouseLeave);
    changeImage();
})